import React, { useState, useCallback,useMemo } from 'react'
import {useNavigate,useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Layout, Menu, Button, Row, Col } from 'antd'
import { UserSwitchOutlined,AppstoreAddOutlined,HomeOutlined,ShareAltOutlined,MenuFoldOutlined,MenuUnfoldOutlined} from '@ant-design/icons'
import '../manage.scss'

import Home from './manage/Home'
import Goods from './manage/Goods'
import GoodsAdd from './manage/goods/Add'
import GoodsList from './manage/goods/List'
import User from './manage/User'
import UserList from "./manage/user/List";
import UserAdd from "./manage/user/Add";

const { Header, Sider, Content } = Layout;



function Manage({user}) {
    const [collapsed, setCollapsed] = useState(false);
    const dispatch = useDispatch()
    const navigate = useNavigate();
    const logout = useCallback(function () {
        dispatch({ type: 'logout' })
    }, [])

    const baseUrl = '/manage'
    const menu = useMemo(()=>[
        {
            key: '/home',
            icon: <HomeOutlined />,
            label: '首页',
        },
        {
            key: '/goods',
            icon: <AppstoreAddOutlined />,
            label: '商品列表',
            children:[
                {
                    key: '/goods/add', 
                    label: '添加商品',
                },
                {
                    key: '/goods/list', 
                    label: '商品列表',
                }
            ]
        },
        {
            key: '/user',
            icon: <ShareAltOutlined />,
            label: '用户管理',
            children:[
                {
                    key: '/user/add', 
                    label: '添加用户',
                },
                {
                    key: '/user/list', 
                    label: '用户列表',
                }
            ]
        },
    ],[])
    const loaction = useLocation()
    const current = loaction.pathname.replace(baseUrl,'') || '/home'
    const openCurrent = loaction.pathname.match(/\/(user|goods)/)?.[0]
    const changeMenu = useCallback(function({ item, key, keyPath, domEvent }){
        console.log('changeMenu', key, keyPath)
        // const path = keyPath.reverse().join('')
        // console.log('path',path)
        navigate(baseUrl + key)

    },[])
    return (
        <div className="container">
            <Layout style={{height:'100vh',overflow:'auto'}}>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo"><UserSwitchOutlined style={{color:'#1890ff'}}/> 后台管理</div>
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={[current]}
                        defaultOpenKeys={[openCurrent]}
                        items={menu}
                        onClick={changeMenu}
                    />
                </Sider>
                <Layout className="site-layout" style={{height:'100vh',overflow:'auto'}}>
                    <Header
                        className="site-layout-background"
                        style={{
                            padding: 0,
                            color:'#0063ee'
                        }}
                    >
                        <Row>
                            <Col span={12}>
                                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                    className: 'trigger',
                                    onClick: () => setCollapsed(!collapsed),
                                })}
                            </Col>
                            <Col span={12} style={{textAlign:'right'}}>
                                <span>{user.username}</span>
                                <Button type="link" size="small" onClick={logout}>退出</Button>
                            </Col>
                        </Row>

                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Routes>
                            {/* /manage/home */}
                            <Route index element={<Navigate to='home'/>}/>
                            <Route path='home' element={<Home />} />
                            <Route path='goods' element={<Goods/>}>
                                <Route path='add' element={<GoodsAdd/>}/>
                                <Route path='list' element={<GoodsList/>}/>
                            </Route>
                            <Route path='user' element={<User/>}>
                                <Route path='add' element={<UserAdd/>}/>
                                <Route path='list' element={<UserList/>}/>
                            </Route>
                        </Routes>
                    </Content>
                </Layout>
            </Layout>

        </div>
    )
}

export default Manage